<template>
  <div>
    <h1>拼团活动列表</h1>
    <!-- 条件查询 -->
    <el-form :inline="true" :model="pageFrom" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input
          v-model="pageFrom.keyWord"
          placeholder="请输入名称"
          clearable
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="loadGroupActiveList">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="onAddActive()">添加活动</el-button>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="activeId" label="Id" />
      <el-table-column prop="activeName" label="活动名称" />
      <el-table-column prop="groupNum" label="组团人数" />
      <el-table-column prop="beginTime" label="开始时间" />
      <el-table-column prop="endTime" label="结束时间" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column label="删除">
        <template #default="scope">
          <el-button
            type="danger"
            size="small"
            @click="onGroupActive(scope.row)"
            >删除</el-button
          >
          <el-button
            type="success"
            size="small"
            @click="onUpdateActive(scope.row)"
            >修改</el-button
          >
          <el-button type="primary" size="small" @click="onAddJoin(scope.row)"
            >商家参与活动</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="margin-top: 20px">
      <el-pagination
        v-model:current-page="pageFrom.pageNum"
        v-model:page-size="pageFrom.pageSize"
        :page-sizes="[2, 4, 6, 8]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 添加活动 -->
    <div>
      <el-dialog v-model="dialogFormVisible" title="添加活动" width="500">
        <el-form :model="form">
          <el-form-item label="活动名称" :label-width="formLabelWidth">
            <el-input v-model="form.activeName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="组团人数" :label-width="formLabelWidth">
            <el-input v-model="form.groupNum" autocomplete="off" />
          </el-form-item>
          <el-form-item label="开始时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="form.beginTime"
              type="datetime"
              placeholder="请选择开始时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item label="截止时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="form.endTime"
              type="datetime"
              placeholder="请选择开始时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="saveGroupActive()">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <!-- 修改活动 -->
    <div>
      <el-dialog v-model="dialogUpdateFormVisible" title="修改活动" width="500">
        <el-form :model="editForm">
          <el-form-item label="活动名称" :label-width="formLabelWidth">
            <el-input v-model="editForm.activeName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="组团人数" :label-width="formLabelWidth">
            <el-input v-model="editForm.groupNum" autocomplete="off" />
          </el-form-item>
          <el-form-item label="开始时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="editForm.beginTime"
              type="datetime"
              placeholder="请选择开始时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item label="截止时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="editForm.endTime"
              type="请选择开始时间"
              placeholder="Select date and time"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="updateActive()"> 保存 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <!-- 商家参与活动 -->
    <div>
      <el-dialog
        v-model="dialogJoinFormVisible"
        title="商家参与活动"
        width="950"
      >
        <el-form :model="joinForm">
          <el-form-item label="拼团活动名称" :label-width="formLabelWidth">
            <el-input
              v-model="joinForm.joinName"
              style="width: 40%"
              autocomplete="off"
            />

            <el-form-item label="拼团活动简介" :label-width="formLabelWidth">
              <el-input
                v-model="joinForm.joinTip"
                style="width: 260px"
                type="textarea"
              />
            </el-form-item>
          </el-form-item>

          <el-form-item label="商品单位" :label-width="formLabelWidth">
            <el-select
              v-model="joinForm.prodUnit"
              placeholder="Select"
              style="width: 240px"
            >
              <el-option
                v-for="item in unitNameList"
                :key="item.dictId"
                :label="item.dictName"
                :value="item.dictValue"
              />
            </el-select>
            <el-form-item label="拼团商品" :label-width="formLabelWidth">
              <el-select
                v-model="joinForm.prodInfoId"
                placeholder="请选择"
                style="width: 240px"
              >
                <el-option
                  v-for="item in prodList"
                  :key="item.prodId"
                  :label="item.prodName"
                  :value="item.prodId"
                />
              </el-select>
            </el-form-item>
          </el-form-item>

          <el-form-item label="活动开始时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="joinForm.beginTime"
              type="datetime"
              placeholder="Select date and time"
            />

            <el-form-item label="活动截止时间" :label-width="formLabelWidth">
              <el-date-picker
                v-model="joinForm.endTime"
                type="datetime"
                placeholder="Select date and time"
              />
            </el-form-item>
          </el-form-item>

          <el-form-item label="拼团时效(小时)" :label-width="formLabelWidth">
            <el-input-number v-model="joinForm.expireTime" :min="1" />
            <el-form-item label="拼团人数" :label-width="formLabelWidth">
              <el-input-number v-model="joinForm.groupNum" :min="1" />
            </el-form-item>
          </el-form-item>

          <el-form-item label="总购买数量限制" :label-width="formLabelWidth">
            <el-input-number v-model="joinForm.buyMax" :min="1" />
            <el-form-item label="补齐人数" :label-width="formLabelWidth">
              <el-input-number v-model="joinForm.virtualNum" :min="1" />
            </el-form-item>
          </el-form-item>

          <el-form-item label="商品原价" :label-width="formLabelWidth">
            <el-input-number v-model="joinForm.prodPrice" :min="1" />
            <el-form-item label="拼团价格" :label-width="formLabelWidth">
              <el-input-number v-model="joinForm.groupPrice" :min="1" />
            </el-form-item>
          </el-form-item>

          <el-form-item label="商品轮播图" :label-width="formLabelWidth">
            <el-upload
              v-model:file-list="fileList"
              :headers="headers"
              action="http://localhost:10010/brand/brand/uploadFile"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
            <el-form-item label="配送方式" :label-width="formLabelWidth">
              <el-select
                v-model="joinForm.sendKind"
                placeholder="请选择"
                style="width: 240px"
              >
                <el-option
                  v-for="item in sendKindList"
                  :key="item.dictId"
                  :label="item.dictName"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-form-item>

          <el-form-item label="运费设置" :label-width="formLabelWidth">
            <el-input-number v-model="joinForm.sendPay" :min="1" />
            <el-form-item label="排序" :label-width="formLabelWidth">
              <el-input-number v-model="joinForm.joinTop" :min="1" />
              <el-form-item label="运费" :label-width="formLabelWidth">
                <el-input-number v-model="joinForm.sendMoney" :min="1" />
              </el-form-item>
            </el-form-item>
          </el-form-item>

          <el-form-item label="活动详情" :label-width="formLabelWidth">
            <el-input v-model="joinForm.joinDesc" type="textarea" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="saveGroupJoin()">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import {
  groupActiveList,
  deleteGroupActive,
  addGroupActive,
  updateGroupActive,
  addGroupJoin,
} from "@/api/team";

import { ElMessage } from "element-plus";

import { getDictByType, getProdList } from "@/api/prod";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps, UploadUserFile } from "element-plus";
const fileList = ref<UploadUserFile[]>([]);
const tableData = ref([]);
const unitNameList = ref([]);
const total = ref(0);
const headers = ref({
  token: sessionStorage.getItem("token"),
});
const pageFrom = ref({
  pageNum: 1,
  pageSize: 2,
  keyWord: null,
});

const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};

const dialogFormVisible = ref(false);
const dialogUpdateFormVisible = ref(false);
const dialogJoinFormVisible = ref(false);
const formLabelWidth = "140px";

const form = ref({
  activeName: "",
  beginTime: "",
  endTime: "",
  groupNum: 0,
});

const editForm = ref({
  activeName: "",
  beginTime: "",
  endTime: "",
  groupNum: 0,
});

const joinForm = ref({
  activeId: 0,
  beginTime: "",
  buyMax: 0,
  createBy: "",
  createTime: "",
  endTime: "",
  expireTime: 0,
  groupNum: 0,
  groupPrice: 0,
  joinDesc: "",
  joinId: null,
  joinImages: null,
  joinName: "",
  joinTip: "",
  joinTop: 0,
  prodInfoId: null,
  prodPrice: 0,
  prodUnit: 0,
  sendKind: null,
  sendMoney: 0,
  sendPay: 0,
  virtualNum: 0,
});

//保存商家参与的活动
const saveGroupJoin = () => {
  //多图片
  let img: any = [];
  fileList.value.forEach((item) => {
    img.push(item.response.data);
  });
  joinForm.value.joinImages = JSON.stringify(img);

  //保存
  addGroupJoin(joinForm.value).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("参与成功");
      dialogJoinFormVisible.value = false;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

//修改
const updateActive = () => {
  updateGroupActive(editForm.value).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("修改成功");
      dialogUpdateFormVisible.value = false;
      loadGroupActiveList();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

const onAddJoin = (row: any) => {
  joinForm.value = {
    activeId: 0,
    beginTime: "",
    buyMax: 0,
    createBy: "",
    createTime: "",
    endTime: "",
    expireTime: 0,
    groupNum: 0,
    groupPrice: 0,
    joinDesc: "",
    joinId: null,
    joinImages: null,
    joinName: "",
    joinTip: "",
    joinTop: 0,
    prodInfoId: null,
    prodPrice: 0,
    prodUnit: 0,
    sendKind: null,
    sendMoney: 0,
    sendPay: 0,
    virtualNum: 0,
  };
  joinForm.value = row;
  dialogJoinFormVisible.value = true;
};
//展示修改活动框
const onUpdateActive = (row: any) => {
  Object.assign(editForm.value, row);
  dialogUpdateFormVisible.value = true;
};

//展示添加活动框
const onAddActive = () => {
  dialogFormVisible.value = true;
};

//保存活动
const saveGroupActive = () => {
  addGroupActive(form.value).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("添加成功");
      dialogFormVisible.value = false;
      loadGroupActiveList();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

//删除
const onGroupActive = (row: any) => {
  deleteGroupActive(row.activeId).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("删除成功");
      loadGroupActiveList();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
//加载
const loadGroupActiveList = () => {
  groupActiveList(pageFrom.value).then((res) => {
    tableData.value = res.data.data.records;
    total.value = res.data.data.total;
  });
};

//每页条数
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  pageFrom.value.pageSize = val;
  loadGroupActiveList();
};
//当前页数
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  pageFrom.value.pageNum = val;
  loadGroupActiveList();
};
const sendKindList = ref([]);
const prodList = ref([]);
const page = ref({
  pageNum: 1,
  pageSize: 9999,
});
onMounted(() => {
  //商品
  getProdList(page.value).then((res) => {
    prodList.value = res.data.data.records;
  });
  //字典数据(单位)
  getDictByType(2).then((res) => {
    unitNameList.value = res.data.data;
  });
  getDictByType(16).then((res) => {
    sendKindList.value = res.data.data;
  });
  loadGroupActiveList();
});
</script>
